<template>
    <div class="container">
      <div class="tips-title">1.基础用法</div>
      <el-row :gutter="10">
        <el-col :span="12">
          <div class="tips-title-sub">默认</div>
          <el-tree :data="data1" :props="props1" @node-click="handleNodeClick1"></el-tree>
        </el-col>
        <el-col :span="12">
          <div class="tips-title-sub">手风琴模式</div>
          <el-tree :data="data1" :props="props1" accordion @node-click="handleNodeClick1"></el-tree>
        </el-col>
      </el-row>
      <div class="tips-title">2.可选择 <span class="tips-explain">show-checkbox</span></div>
      <el-tree :props="props2" :load="loadNode2" lazy show-checkbox @check-change="handleCheckChange2"></el-tree>
      <div class="tips-title">3.默认展开、默认选中、禁用状态 <span class="tips-explain">show-checkbox</span></div>
      <el-tree
        :data="data1"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3, 9, 11]"
        :default-checked-keys="[6]"
        :props="props1">
      </el-tree>
      <div class="tips-title">4.节点过滤 <span class="tips-explain">通过关键字过滤树节点</span></div>
      <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
      <el-tree :data="data4" :props="props1" default-expand-all :filter-node-method="filterNode" ref="tree"></el-tree>
      <div class="tips-title">5.树节点的选择</div>
      <el-tree :data="data1"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="props1">
      </el-tree>
      <br>
      <div>
        <el-button @click="getCheckedNodes">通过 node 获取</el-button>
        <el-button @click="getCheckedKeys">通过 key 获取</el-button>
        <el-button @click="setCheckedNodes">通过 node 设置</el-button>
        <el-button @click="setCheckedKeys">通过 key 设置</el-button>
        <el-button @click="resetChecked">清空</el-button>
      </div>
      <div class="tips-title">6.可拖拽节点</div>
      <el-tree
        :data="data1"
        node-key="id"
        default-expand-all
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
        draggable
        :allow-drop="allowDrop"
        :allow-drag="allowDrag">
      </el-tree>

    </div>

</template>
<script>
  const testData1 = [{
    id: 1,
    label: '一级 1',
    children: [{
      id: 4,
      label: '二级 1-1',
      children: [{
        id: 5,
        label: '三级 1-1-1'
      }]
    }]
  }, {
    id: 2,
    label: '一级 2',
    children: [{
      id: 6,
      label: '二级 2-1',
      children: [{
        id: 8,
        label: '三级 2-1-1'
      }]
    }, {
      id: 7,
      label: '二级 2-2',
      children: [{
        label: '三级 2-2-1'
      }]
    }]
  }, {
    id: 3,
    label: '一级 3',
    children: [{
      id: 9,
      label: '二级 3-1',
      disabled: true,
      children: [{
        id: 11,
        label: '三级 3-1-1',
        disabled: true
      }]
    }, {
      id: 10,
      label: '二级 3-2',
      children: [{
        id: 12,
        label: '三级 3-2-1'
      }]
    }]
  }];
  const testData2 = [
    {label:'广东省',children:[{label: '广州市',children:[{label:'白云区'},{label:'天河区'},{label:'花都区'},{label:'越秀区'}]},{label: '深圳市'},{label: '东莞市'},{label: '中山市'},{label: '珠海市'}]},
    {label:'上海市',children:[{label:'黄浦区'},{label:'浦东新区'},{label:'徐汇区'},{label:'嘉陵区'}]}
  ];

  export default {
    name: 'd-tree',
    data() {
      return {
        data1: testData1,
        props1: {
          children: 'children',
          label: 'label'
        },
        count: 1,
        props2: {
          label: 'name',
          children: 'zones'
        },
        filterText: '',
        data4: testData2
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
      handleNodeClick1(data) {
        console.log(data);
      },
      handleCheckChange2(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      },
      loadNode2(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region1' }, { name: 'region2' }]);
        }
        if (node.level > 3) return resolve([]);

        var hasChild;
        if (node.data.name === 'region1') {
          hasChild = true;
        } else if (node.data.name === 'region2') {
          hasChild = false;
        } else {
          hasChild = Math.random() > 0.5;
        }

        setTimeout(() => {
          var data;
          if (hasChild) {
            data = [{
              name: 'zone' + this.count++
            }, {
              name: 'zone' + this.count++
            }];
          } else {
            data = [];
          }

          resolve(data);
        }, 500);
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 9,
          label: '三级 1-1-1'
        }]);
      },
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3]);
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      },

      handleDragStart(node, ev) {
        console.log('drag start', node);
      },
      handleDragEnter(draggingNode, dropNode, ev) {
        console.log('tree drag enter: ', dropNode.label);
      },
      handleDragLeave(draggingNode, dropNode, ev) {
        console.log('tree drag leave: ', dropNode.label);
      },
      handleDragOver(draggingNode, dropNode, ev) {
        console.log('tree drag over: ', dropNode.label);
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
      },
      handleDrop(draggingNode, dropNode, dropType, ev) {
        console.log('tree drop: ', dropNode.label, dropType);
      },
      allowDrop(draggingNode, dropNode, type) {
        if (dropNode.data.label === '二级 3-1') {
          return type !== 'inner';
        } else {
          return true;
        }
      },
      allowDrag(draggingNode) {
        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
      }
    }
  }
</script>
<style>
</style>

